OilTrack · ส่วนประกอบหน้าจอที่ใช้ร่วมกัน (Shared UI components)
Prototype V.2 · 2026-09
Spheresoft Co., Ltd.
เอกสารอ้างอิงต้นแบบ — ไม่ใช่สัญญาส่งมอบ
OilTrack · ส่วนประกอบหน้าจอที่ใช้ร่วมกัน
เอกสารนี้รวบรวมส่วนประกอบที่ปรากฏซ้ำในสามแอป แต่ละรายการมีตัวอย่างจริง · กฎการใช้ · และตารางว่าถูกใช้ซ้ำที่ไหนและต่างกันอย่างไร ค่าสี ตัวอักษร ระยะห่าง และรัศมีมุมทั้งหมดมาจาก OilTrack Design System — ที่นี่บันทึกเพียงว่านำไปประกอบอย่างไรในระบบนี้
หลักที่ใช้ตัดสินทุกครั้ง: Prompt สำหรับสิ่งที่คนอ่าน · IBM Plex Mono สำหรับสิ่งที่เครื่องสร้าง เลขที่คำขอ ทะเบียน ลิตร มาตรวัด เวลา UTC รหัส 6 หลัก และรหัสอุปกรณ์ทั้งหมดเป็น mono เสมอ ทั้งสามแอปและทุกเอกสาร
1 · ตารางการใช้ซ้ำ (reuse matrix)
| ส่วนประกอบ |
หลังบ้าน |
คนขับ |
คีออสก์ |
เครื่องมือ |
ต่างกันอย่างไร |
| ป้ายสถานะคำขอ | ● | ● | ● | ● | สีและคำเหมือนกันทุกที่ · คีออสก์ใช้ขนาดใหญ่กว่า |
| การ์ดคำขอ | ● | ● | ● | — | คนขับไม่แสดงความจุถัง · คีออสก์ไม่มีปุ่ม |
| นับถอยหลัง | ● | ● | ● | — | ไม่มีกำหนดเวลา = ไม่แสดงเลย ไม่ใช่ 0:00 |
| ตารางข้อมูล + แถบกรอง | ● | — | — | ● | เครื่องมือใช้แบบแน่นกว่า · ไม่มีแผงรายละเอียด |
| แผงรายละเอียดด้านขวา | ● | — | — | ● | หลังบ้าน 400px · เครื่องมือใช้เต็มความสูง |
| แถบข้อมูลอ้างอิง (คู่ป้าย-ค่า) | ● | ● | ● | ● | คีออสก์เรียงตั้ง · ที่อื่นเรียงสองคอลัมน์ |
| กล่องยืนยันการกระทำ | ● | ● | — | ● | คนขับใช้แบบเลื่อนขึ้นจากล่างจอ |
| แถบทำตามขั้น | ● | ● | — | — | คนขับ 4 ขั้น · หลังบ้านใช้ในตัวช่วยมอบหมายงาน |
| รายการที่ถูกล็อก (แสดงแต่กดไม่ได้) | ● | ● | — | — | เหตุผลการล็อกต่างกันตามผู้อ่าน |
| ตัวเลขเด่น (มาตรวัด · ลิตร · ต้นทุน) | ● | ● | ● | ● | ขนาดต่างกันตามระยะการมอง: 14 → 32 → 104px |
| แถบเปอร์เซ็นต์ถัง | ● | — | ● | ● | คนขับไม่เห็นเลย — เป็นตัวเลขความจุ |
| ข้อความว่างเปล่า | ● | ● | ● | ● | บอกเหตุผลเสมอ ไม่ใช่แค่ “ไม่มีข้อมูล” |
| แผงนักพัฒนา / จำลองการทดสอบ | ● | ● | ● | ● | ปิดเป็นค่าเริ่มต้นทุกแอป · คีออสก์วางนอกกรอบจอ |
ตารางที่ 1 — ส่วนประกอบ 13 รายการที่ใช้ซ้ำ ● = ใช้ · — = ไม่ใช้ (มีเหตุผลกำกับในคอลัมน์สุดท้าย) การไม่ใช้บางรายการฝั่งคนขับเป็นข้อบังคับ ไม่ใช่ความไม่สมบูรณ์
2 · ป้ายสถานะคำขอ
ส่วนประกอบที่ใช้หนักที่สุดในระบบ ทุกหน้าจออ่านสีและคำจากแหล่งเดียว (DB.statusMeta()) จึงไม่มีหน้าไหนเขียนรายการสถานะเอง สีถูกจับคู่ตายตัว: เหลือง = รอคน · เขียว = อนุมัติแล้ว · น้ำเงิน = จับฮาร์ดแวร์แล้ว · เทา/แดง = ปิดเรื่อง
รออนุมัติ
รอมอบหมายงาน
อนุมัติแล้ว
รอยืนยันการผูก
ผูกหัวจ่ายแล้ว
กำลังเติมน้ำมัน
เสร็จสิ้น
ไม่อนุมัติ
ยกเลิก
หมดอายุ
ผิดพลาด
หลังบ้าน · เครื่องมือ
12px ในเซลล์ตาราง · จุดสถานะ 6px · ไม่ตัดคำ
คนขับ
13px บนการ์ด · วางมุมขวาบนเสมอ
คีออสก์
14px บนหัวแถบ · ใช้คีย์สถานะ mono เพิ่มอีกชั้น
รูปที่ 1 — สถานะทั้งสิบเอ็ดตามที่ปรากฏจริง ป้ายเป็นทรงแคปซูล (pill) ซึ่งเป็นที่เดียวในระบบที่ใช้รัศมีมุมแบบนี้ ที่อื่นเป็น 0 หรือ 4px
3 · การ์ดคำขอ
โครงเดียวกันสามแบบ: เลขที่คำขอ + ป้ายสถานะบนหัว · ข้อมูลอ้างอิงกลาง · การกระทำหรือเวลาที่เหลือด้านล่าง ความต่างอยู่ที่สิ่งที่ตัดออก ไม่ใช่การจัดวางใหม่
คนขับ — ไม่มีตัวเลขความจุถัง
รถ6ขฉ3344
ปริมาณที่ขอเต็มถัง
หัวจ่ายDP-0001 · หัว 1
หลังบ้าน — เพิ่มต้นทุนและการกระทำ
REQ-4844
ประสิทธิ์ แสงทอง · 6ขฉ3344
ปลดหัวจ่าย
ยกเลิกคำขอ
รูปที่ 2 — การ์ดเดียวกันสองผู้อ่าน ฝั่งคนขับ “เต็มถัง” แทนตัวเลข และไม่มีแถวความจุถัง ต้นทุน หรือมาตรวัดดิบ · ฝั่งคีออสก์ใช้โครงเดียวกันแต่ตัดปุ่มออกทั้งหมดและขยายตัวอักษร
4 · นับถอยหลัง
กฎสำคัญกว่ารูปแบบ: ไม่มีกำหนดเวลา = ไม่แสดงส่วนประกอบนี้เลย ไม่ใช่แสดง 0:00 หรือ — ค้างไว้ เพราะแถวข้อมูลตัวอย่างบางแถวจงใจไม่มีกำหนดเวลา และการแสดงศูนย์จะทำให้อ่านว่าหมดเวลาแล้ว
ใกล้หมด
4:12
เหลือไม่ถึง 20%
วิกฤต
0:38
เหลือไม่ถึงหนึ่งนาที
ไม่มีกำหนดเวลา
ไม่แสดงอะไรเลย — ทั้งตัวเลข แถบ และคำเตือน
รูปที่ 3 — สี่สภาพของตัวนับ ตัวเลขเป็น mono และใช้ตัวเลขความกว้างเท่ากัน เพื่อไม่ให้ความกว้างขยับทุกวินาที
5 · ตารางข้อมูล แถบกรอง และแผงรายละเอียด
รูปแบบหลักของหลังบ้านและเครื่องมือ: แถบกรองอยู่เหนือตารางเสมอ ไม่ซ่อนในเมนู · ตารางอยู่ในการ์ดที่มุมมน 0 และเลื่อนแนวนอนในตัวเอง (พื้นความกว้าง 1280px) · การเลือกแถวเปิดแผงด้านขวา 400px ไม่ใช่กล่องลอย
ค้นหาเลขที่คำขอ ทะเบียน คนขับ
สถานะ: ทั้งหมด
ช่วงเวลา: 90 วัน
7 จาก 42 รายการ
เลขที่
คนขับ · รถ
ลิตร ↓
ต้นทุน
สถานะ
REQ-4844
ประสิทธิ์ แสงทอง · 6ขฉ3344
64.20
฿1,913.16
กำลังเติมน้ำมัน
REQ-4843
กิตติ บุญมาก · 5กจ9012
80.00
—
อนุมัติแล้ว
REQ-4842
อรุณ ศรีสุข · 2กท3456
50.00
—
รออนุมัติ
รูปที่ 4 — ตารางและแถบกรอง คอลัมน์ตัวเลขชิดขวาและเป็น mono เสมอ · แถวที่เลือกใช้พื้นน้ำเงินอ่อนกับขอบซ้าย 2px ซึ่งเป็นคู่สีเดียวกับเมนูที่กำลังเปิดอยู่บนแถบด้านซ้าย · ค่าที่ยังไม่มีใช้ — ไม่ใช่ 0 หรือช่องว่าง
ไม่มีภาพเคลื่อนไหว: แถวไม่ค่อย ๆ ปรากฏ แผงรายละเอียดไม่เลื่อนเข้า สถานะเปลี่ยนทันที เพื่อไม่ให้ผู้ใช้สงสัยว่าค่าที่เห็นเป็นค่าปัจจุบันหรือค่ากำลังเปลี่ยน สิ่งเดียวที่เคลื่อนไหวคือตัวเลขมาตรวัดที่เดินจริง และแถบความคืบหน้า
6 · ตัวเลขเด่นและแถบเปอร์เซ็นต์ถัง
ตัวเลขเดียวกันเปลี่ยนขนาดตามระยะที่คนมอง: ในเซลล์ตาราง 12–14px (นั่งหน้าจอ) · บนการ์ดคนขับ 32px (ถือมือถือ) · บนจอหัวจ่าย 84–104px (ยืนห่างหนึ่งช่วงแขนกลางแดด) ทุกขนาดใช้ mono และทศนิยมสองตำแหน่งเสมอ
มาตรวัดสดบนจอหัวจ่าย
64.20ล.
อัตราไหล 18.4 ล./นาทีเวลาที่ใช้ 3:29
ในเอกสารนี้ย่อจาก 104px เพื่อให้พอในหน้ากระดาษ
แถบเปอร์เซ็นต์ถัง (หลังบ้าน · เครื่องมือ · คีออสก์)
TK-00014,182.40 / 8,000.00 ล.
TK-0004 · บนรถ96.00 / 800.00 ล.
ไม่ปรากฏในแอปคนขับเลย — เป็นตัวเลขความจุถัง
รูปที่ 5 — ตัวเลขเด่นและแถบถัง แถบใช้สีน้ำเงินเมื่อปกติ และเหลืองเมื่อต่ำกว่าเกณฑ์ · ไม่มีการไล่ระดับสีและไม่มีเงา
7 · รายการที่ถูกล็อก · การยืนยัน · ข้อความว่างเปล่า
รายการที่ถูกล็อก — แสดง ไม่ซ่อน
ความจาง 0.45 + เหตุผลติดกับแถว · ไม่ตัดออกจากรายการ เพราะคนขับต้องรู้ว่ารถอยู่ไหน ไม่ใช่ว่ารถหายไป
กล่องยืนยันที่มีผลถาวร
ยกเลิกคำขอ REQ-4842
รถและคนขับจะถูกปล่อยทันที และคนขับยื่นคำขอใหม่ได้ทันที การกระทำนี้ย้อนกลับไม่ได้
เหตุผล (จำเป็น)
ไม่ยกเลิก
ยกเลิกคำขอ
บอกผลที่จะเกิด ไม่ใช่ถามว่า “แน่ใจหรือไม่” · ปุ่มยืนยันใช้คำกริยาเดิม ไม่ใช่ “ตกลง”
ข้อความว่างเปล่า — บอกเหตุผลเสมอ
ยังไม่มีคำขอ
กดปุ่มด้านล่างเพื่อยื่นคำขอเบิกน้ำมันครั้งแรก
ไม่พบรายการตามตัวกรอง
มี 42 รายการทั้งหมด · ลองล้างตัวกรองสถานะ
ยังไม่พัฒนาในต้นแบบนี้
ตั้งใจเว้นว่างไว้ ไม่ใช่ข้อผิดพลาด
รูปที่ 6 — สามแบบของสภาพว่างเปล่า แยกกันชัดเจน: ยังไม่เริ่มใช้งาน · ตัวกรองแคบเกินไป · ยังไม่พัฒนา การใช้ข้อความเดียวว่า “ไม่มีข้อมูล” ทั้งสามกรณีถือว่าผิด
8 · กฎที่ใช้ตัดสินเวลาสร้างหน้าจอใหม่
| กฎ |
เหตุผล |
| ค่าที่เครื่องสร้างเป็น mono เสมอ | ผู้ใช้แยกได้ทันทีว่าค่าไหนมาจากฮาร์ดแวร์หรือระบบ ค่าไหนคนกรอก |
| สถานะอ่านจากแหล่งเดียว | สีและคำจึงตรงกันทุกหน้าจอโดยไม่ต้องคอยตามแก้ |
| ไม่มีข้อมูล = บอกว่าทำไม | ช่องว่างเปล่าทำให้ผู้ใช้เดาว่าระบบพัง |
| ถูกล็อก = แสดงพร้อมเหตุผล ไม่ซ่อน | การซ่อนทำให้ผู้ใช้คิดว่าข้อมูลหาย และโทรถามฝ่ายสนับสนุน |
| กล่องยืนยันบอกผล ไม่ถามความแน่ใจ | “แน่ใจหรือไม่” ไม่ได้ให้ข้อมูลใหม่แก่คนที่กำลังจะกด |
| ไม่มีตัวเลขความจุถังฝั่งคนขับ | ข้อบังคับของโครงการ — ตรวจเพดานเงียบ ๆ และแสดงเป็นสถานะ |
| ไม่มีภาพเคลื่อนไหว ไม่มีเงาที่ไม่จำเป็น | เส้นขอบ 1px แทนเงาได้เกือบทุกที่ · ความนิ่งทำให้ค่าที่เห็นน่าเชื่อถือ |
| แผงทดสอบปิดเป็นค่าเริ่มต้น | คนดูสาธิตต้องเห็นสิ่งเดียวกับผู้ใช้จริง ไม่ใช่หน้าจอที่มีปุ่มทดสอบ |
ตารางที่ 2 — แปดกฎที่ใช้ตัดสินทุกครั้งที่เพิ่มหน้าจอใหม่ อ่านคู่กับ BACKOFFICE-LAYOUT.md และ KIOSK-LAYOUT.md ซึ่งกำหนดเรขาคณิตของแต่ละพื้นผิวไว้แน่นอนกว่านี้